<template>
  <div v-for="(item, value, index) in list" :key="value">
    <!-- <div v-if="Array.isArray(item.lesionList)">
      <li
        :class="
          LeftHooks.leftHooksData.currentIndex === String(item.id)
            ? 'left-silder-submenu-item-li active'
            : 'left-silder-submenu-item-li'
        "
      >
        <div class="left-silder-submenu-item-title">
          <div class="left-silder-submenu-item-title-icon">
            <i
              :class="item.visibile ? 'iconfont icon-xiala' : 'iconfont icon-shouqi'"
              style="font-size: 12px"
            ></i>
          </div>
          <a-tooltip :content="item.code" position="right" mini>
            <div
              class="left-silder-submenu-item-title-content"
              @click="LeftHooks.handleFrameClick(item)"
            >
              {{ item.code }}
            </div>
          </a-tooltip>
          <div
            class="left-silder-submenu-item-icon"
            :style="{ display: !isQuery ? 'flex' : 'none' }"
          >
            <div
              class="left-silder-submenu-item-icon-del"
              v-if="!isQuery && isDel"
              @click="LeftHooks.handlePopConfirmClick"
            >
              <a-popconfirm
                v-model="LeftHooks.leftHooksData.popVisible"
                content="你确定要删除吗?"
                okText="确定"
                cancelText="取消"
                type="warning"
                @ok="() => LeftHooks.handleSecondClick(item)"
              >
                <i class="iconfont icon-shanchu"></i>
              </a-popconfirm>
            </div>
            <div
              class="left-silder-submenu-item-icon-eye"
              @click="LeftHooks.handleLesionEyeClick(item, $event)"
              v-if="!isQuery && isEye"
            >
              <i
                :class="item.eyeStatus ? 'iconfont icon-biyan1' : 'iconfont icon-biyan'"
              ></i>
            </div>
          </div>
        </div>
      </li>
      <div class="lesion-item-box" v-show="item.visibile">
        <li
          :class="
            LeftHooks.leftHooksData.currentIndex === String(it.id)
              ? 'left-silder-submenu-item-li active'
              : 'left-silder-submenu-item-li'
          "
          v-for="it in item.lesionList"
          :key="it.id"
        >
          <div class="left-silder-submenu-item-title">
            <div class="left-silder-submenu-item-title-icon" style="width: 16px"></div>
            <a-tooltip
              :content="(it.lesion ?? '') + '-' + (it.id ?? '')"
              position="right"
              mini
            >
              <div
                class="left-silder-submenu-item-title-content"
                @click="LeftHooks.handleLesionClick(it)"
              >
                {{ (it.lesion ?? "") + "-" + (it.id ?? "") }}
              </div>
            </a-tooltip>
            <div
              class="left-silder-submenu-item-icon"
              :style="{ display: !isQuery ? 'flex' : 'none' }"
            >
              <div
                class="left-silder-submenu-item-icon-del"
                v-if="!isQuery && isDel"
                @click="LeftHooks.handlePopConfirmClick"
              >
                <a-popconfirm
                  v-model="LeftHooks.leftHooksData.popVisible"
                  content="你确定要删除吗?"
                  okText="确定"
                  cancelText="取消"
                  type="warning"
                  @ok="() => LeftHooks.handleSecondClick(item)"
                >
                  <i class="iconfont icon-shanchu"></i>
                </a-popconfirm>
              </div>
              <div
                class="left-silder-submenu-item-icon-eye"
                @click="LeftHooks.handleLesionEyeClick(it, $event)"
                v-if="!isQuery && isEye"
              >
                <i
                  :class="
                    it.itemEyeStatus ? 'iconfont icon-biyan1' : 'iconfont icon-biyan'
                  "
                ></i>
              </div>
            </div>
          </div>
        </li>
      </div>
    </div> -->
    <div v-if="!Array.isArray(item)">
      <li
        :class="
          LeftHooks.leftHooksData.currentIndex === String(item.id)
            ? 'left-silder-submenu-item-li active'
            : 'left-silder-submenu-item-li'
        "
      >
        <div class="left-silder-submenu-item-title">
          <div @click="LeftHooks.handleLesionEyeClick(item, $event)" v-if="isEye">
            <i
              :class="item.eyeStatus ? 'iconfont icon-biyan1' : 'iconfont icon-biyan'"
            ></i>
          </div>
          <a-tooltip
            :content="(item.lesion ?? '') + '-' + (item.id ?? '')"
            position="right"
            mini
          >
            <div
              class="left-silder-submenu-item-title-content"
              @click="LeftHooks.handleLesionClick(item)"
            >
              <span v-if="item.lesion && item.id">{{
                (item.lesion ?? "") + "-" + (item.id ?? "")
              }}</span>
            </div>
          </a-tooltip>
        </div>
        <div class="left-silder-submenu-item-icon">
          <div
            class="left-silder-submenu-item-icon-color"
            :style="{ backgroundColor: item.color }"
            v-if="!isQuery && isColor"
          >
            <el-color-picker
              v-model="item.color"
              @change="LeftHooks.handleColorChange(item, $event)"
              size="small"
            ></el-color-picker>
          </div>

          <div
            class="left-silder-submenu-item-icon-del"
            v-if="!isQuery && isDel"
            @click="LeftHooks.handlePopConfirmClick"
          >
            <a-popconfirm
              v-model="LeftHooks.leftHooksData.popVisible"
              content="你确定要删除吗?"
              okText="确定"
              cancelText="取消"
              type="warning"
              @ok="() => LeftHooks.handleSecondClick(item)"
            >
              <i class="iconfont icon-shanchu"></i>
            </a-popconfirm>
          </div>
        </div>
      </li>
    </div>
  </div>
</template>
<script lang="ts" setup name="ImgAndMpr">
import { inject } from "vue";
import * as Store from "@/store";
import type { LesionItem } from "@/store/modules/filmRead/type";

interface Props {
  list:
    | {
        [x: string]: LesionItem | LesionItem[];
        [x: number]: LesionItem | LesionItem[];
      }
    | undefined;
  isEye: boolean;
  isColor: boolean;
  isDel: boolean;
  LeftHooks: Left.LeftHooks;
  type: string;
}
const props = defineProps<Props>();
const FilmRead = Store.useFilmRead();
const isCreate = inject<boolean>("isCreate");
const isQuery = inject<boolean>("isQuery");
const isEdit = inject<boolean>("isEdit");
</script>
<style lang="less" scoped>
.left-silder {
  min-width: 180px;
  max-width: 180px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
  display: flex;
  flex-direction: column;
  &-submenu {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    color: #ccc;
    &-title {
      font-weight: 400;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      span {
        margin-left: 6px;
        font-weight: 400;
        font-size: 14px;
      }
    }
  }
  &-submenu.active,
  &-submenu-item-li.active {
    color: #13fffb;
    background-color: #28353c;
  }
  &-submenu:hover {
    cursor: pointer;
  }
  &-submenu-item {
    margin: 0;
    padding: 0;
    user-select: none;
    // flex: 9;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    &-li {
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      border-bottom: 1px solid #000;
    }
    &-li:hover {
      background-color: #28353c;
      //color: #fff;
      cursor: pointer;
    }
    &-title {
      user-select: none;
      width: 100%;
      font-weight: 400;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      &-icon {
        padding: 10px 0;
        margin-right: 3px;
      }
      &-content {
        padding: 10px 0;
        margin-left: 6px;
        display: inline-block;
        // width: 100%;
        min-width: 86px;
        max-width: 86px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    &-icon {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: 8px;
      &-color {
        width: 10px;
        height: 10px;
        margin-right: 10px;
        margin-top: 2px;
        :deep(.el-color-picker--small) {
          height: 10px;
          .el-color-picker__trigger {
            width: 10px;
            height: 10px;
            margin-right: 10px;
            display: block;
            border: 0;
            opacity: 0;
          }
        }
      }

      &-color:hover,
      &-del:hover {
        cursor: pointer;
      }
      &-del:hover {
        color: #67c9d5;
      }
      &-del {
        .iconfont {
          font-size: 12px;
        }
      }
      &-eye {
        margin-left: 9px;
        .iconfont {
          font-size: 12px;
        }
      }
    }
  }
  // &-submenu-item::-webkit-scrollbar-track {
  //   background-color: #f5f5f5;
  //   --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  // }
  // &-submenu-item::-webkit-scrollbar {
  //   width: 6px;
  //   background-color: rgba(40, 49, 66, 0.6);
  // }
  // &-submenu-item::-webkit-scrollbar-thumb {
  //   background-color: #8b8b8b;
  //   border-radius: 10px;
  // }
  &-bottom-tip {
    // flex: 1;
    padding: 12px;
    border-top: 1px solid #000;
    height: 132px;
    min-height: 132px;
    max-height: 132px;
    &-title {
      display: flex;
      align-items: center;
      &-circle {
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #f7bc5a;
        border-radius: 50%;
      }
      &-content {
        font-weight: 400;
        font-size: 12px;
        color: #f7bc5a;
        margin-left: 4px;
      }
    }
    &-content {
      margin-top: 4px;
      font-weight: 400;
      font-size: 12px;
      line-height: 22px;
      color: #ccc;
    }
  }
}
</style>
